<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>热量健身-首页</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/indexindex.css">
</head>

<body>
    <section class="wrap">
        <!-- 头部登录 -->
        <div class="header">
            <img src="imagess/头像.png" alt="">
            <span>请登录 <br> <p>编辑资料</p> 
            <a href="#">></a></span>
        </div>

        <!-- 个人简介 -->
        <div class="jieshao">
            <span>体重(kg) <br><p>55.0</p></span>
            <span>体脂率(%) <br><p>22.1</p> </span>
            <span>肌肉率(%) <br><p>70.0</p></span>
        </div>


        <!-- 导航栏 -->
        <ul class="nav">
            <li>
                <a href="#">
                    <img src="imagess/记录体重.PNG" alt="">
                    <span>记录体重</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/身份档案.PNG" alt="">
                    <span>身体档案</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/绑定设备.PNG" alt="">
                    <span>绑定设备</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/食谱记录.PNG" alt="">
                    <span>食谱记录</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/身体数据.PNG" alt="">
                    <span>身体数据</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/体重趋势.PNG" alt="">
                    <span>体重趋势</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/习惯提醒.PNG" alt="">
                    <span>习惯提醒</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="imagess/我的收藏.PNG" alt="">
                    <span>我的收藏</span>
                </a>
            </li>
        </ul>

        <!-- 热量分析卡 -->
        <div class="reliang">
            热量分析
            <p>900/1900<span>千卡</span></p>
            <img src="imagess/周期分析.PNG" alt="">
            <h4>周平均值<span>0 千卡</span></h4>
        </div>

        <!-- 营养分析卡 -->
        <div class="yingyang">
            营养分析
            <p>
                <img src="imagess/碳水.png" alt=""> 碳水化合物 0.0%
                <img src="imagess/蛋白质.png" alt=""> 蛋白质 0.0%
                <img src="imagess/脂肪.png" alt=""> 脂肪 0.0%
            </p>
            <img src="imagess/周期分析.PNG" alt="">
            <h4>周平均值<span>碳水0.0% 蛋白质0.0% 脂肪0.0%</span></h4>
        </div>

    </section>

    <footer class="footer">
        <a href="index.html" class="item remen">
            <img src="imagess/首页.png" alt="">
            <p>首页</p>
        </a>
        <a href="#" class="item">
            <img src="imagess/食谱.png" alt="">
            <p>食谱</p>
        </a>
        <a href="#" class="item">
            <img src="imagess/锻炼.png" alt="">
            <p>锻炼</p>
        </a>
        <a href="#" class="item">
            <img src="imagess/我的.png" alt="">
            <p>我的</p>
        </a>
    </footer>
</body>

</html>